import { useEffect, useState } from 'react';
import { isArray, HorizolScroll, BellOutlined, Button } from 'esy-ui';
import { postNotes } from '@/services';
import { useGlobalStore } from '@/mobx';

const defList = [
  { text: '这是一个水平滚动组件1~~~', url: 'https://www.baidu.com', id: 1 },
  { text: '这是一个水平滚动组件2~~~', url: 'https://taro.jd.com/home/in.html', id: 2 },
];

function Notes() {
  const [list, setList] = useState(defList);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    postNotes()
      .then((res?: any) => {
        if (isArray(res?.data)) {
          setList(res?.data);
        }
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return (
    <div className='text-center'>
      <div className='bg-bg-1 flex items-center justify-between px-3'>
        <BellOutlined className='text-text-1 mr-2' />
        <HorizolScroll
          list={list}
          onClick={(info) => {
            window.open(info.url);
          }}
        />
        <Button type='link' size='mini' className='ml-2'>
          复制网址
        </Button>
      </div>
    </div>
  );
}

export default Notes;
